<template>
    <div v-if="isShow(['kanke:textbook:courseware:list-pub','kanke:textbook:courseware:list-book','kanke:textbook:courseware:list-video','kanke:textbook:courseware:list-ppt','kanke:textbook:courseware:list-audio'])">
        <el-row>
            <el-tabs type="border-card" v-model="activeKey" @tab-click="handleClick">
                <el-tab-pane name="all" label="课件素材库" v-if="hasPermission('kanke:textbook:courseware:list-pub')">
                    <MateTabPane v-if="activeKey == 'all'" :type="activeKey" />
                </el-tab-pane>
                <el-tab-pane name="book" label="课本列表" v-if="hasPermission('kanke:textbook:courseware:list-book')">
                    <TabPane v-if="activeKey == 'book'" :type="activeKey" />
                </el-tab-pane>
                <el-tab-pane name="video" label="视频课件列表" v-if="hasPermission('kanke:textbook:courseware:list-video')">
                    <TabPane v-if="activeKey == 'video'" :type="activeKey" />
                </el-tab-pane>
                <el-tab-pane name="ppt" label="PPT课件列表" v-if="hasPermission('kanke:textbook:courseware:list-ppt')">
                    <TabPane v-if="activeKey == 'ppt'" :type="activeKey" />
                </el-tab-pane>
                <el-tab-pane name="audio" label="音频课件列表" v-if="hasPermission('kanke:textbook:courseware:list-audio')">
                    <TabPane v-if="activeKey == 'audio'" :type="activeKey" />
                </el-tab-pane>
            </el-tabs>
        </el-row>

    </div>
</template>

<script>
import {hasPermission, isShow} from '@/common/permission';
// 课件
import TabPane from './components/TabPane.vue';
// 课件素材库
import MateTabPane from './components/MateTabPane.vue';
export default {
    // 1=>素材库,2=>课本;3=>视频;4=>ppt;5=>音频;
    name: "KanKeTextbookCourseWare",
    components: {
        TabPane,
        MateTabPane
    },
    data() {
        return {

            activeKey: this.$route.params.type || 'all'

        }
    },
    methods: {
        hasPermission,
        isShow,

        handleClick(tab, event) {
            this.activeKey = tab.name;
        }
    }
}
</script>

<style scoped></style>